<template>
  <PageWrapper :title="t('routes.menu.Sa_Order') + t('common.edit')" class="pb-12">
    <!-- subTitle：PageWrapper副标题插槽 -->
    <template #subTitle> {{ detailRef.BillId }} </template>
    <!-- extra：PageWrapper页面操作插槽 -->
    <template #extra>
      <a-button type="primary" @click="submitAll(false)" class="mx-4">
        {{ t('common.saveText') }}
      </a-button>
      <a-button type="primary" @click="submitAll(true)"> {{ t('common.saveAndSubmit') }} </a-button>
    </template>
    <Block :title="t('common.billDes')">
      <!-- 表单组件 register 表单注册函数 field-value-change 字段 字段值 改变监听 -->
      <BasicForm @register="register" @field-value-change="fieldChange" />
    </Block>
    <!-- wrapper 是否需要Card组件包裹 -->
    <Block :title="t('common.editDetails')" :wrapper="false">
      <BasicTable @register="registerTable">
        <!--插槽toolbar 为表格组件的功能插槽 -->
        <template #toolbar>
          <a-button type="primary" @click="editDetails">
            {{ t('common.selectDetails') }}
          </a-button>
        </template>
        <!-- 表格列插槽 bodyCell-->
        <template #bodyCell="{ column, record }">
          <!-- 表格操作列默认key为action -->
          <template v-if="column.key === 'action'">
            <!-- 表格行操作组件 -->
            <TableAction
              :actions="[
                {
                  // 图标
                  icon: 'ant-design:delete-outlined',
                  // 颜色状态
                  color: 'error',
                  // 悬浮显示内容
                  tooltip: t('common.delText'),
                  // 气泡确认提示
                  popConfirm: {
                    // 确认内容
                    title: t('common.isDel'),
                    // 弹出位置
                    placement: 'left',
                    // 确认回调
                    confirm: handleDelete.bind(null, record),
                  },
                },
              ]"
            />
          </template>
        </template>
      </BasicTable>
    </Block>
    <!-- 附件列表 fileId 单据ID  file-change 数据改变监听-->
    <Annex @file-change="(e) => (detailRef.BillFiles = e)" :fileId="detailRef.BillId" />
    <!-- 物料选择Modal register弹框组件注册函数 success 选择成功回调-->
    <MaterialModal @register="modalRegister" @success="getMaterial" />
  </PageWrapper>
</template>
<script lang="ts" setup name="Sa_Order_Edit">
  // ----------------------------- 第三方引入 -----------------------------
  import { unref, onMounted, ref, nextTick } from 'vue';
  // ----------------------------- hooks -----------------------------
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useAppRouter } from '/~/hooks/help/useAppRouter';
  // 明细编辑表格通用hook
  import { useAppEditTable } from '/~/hooks/help/useAppTable';
  import { useAppForm } from '/~/hooks/help/useAppForm';
  // 管理税率hook
  import { useTax } from '/~/hooks/work/useTax';
  // ----------------------------- 组件 -----------------------------
  // 表单组件
  import { BasicForm } from '/@/components/Form';
  import { BasicTable, TableAction } from '/@/components/Table';
  // 物料弹框组件及hook
  import { MaterialModal, useModal } from '/~/components/MaterialModal';
  import { PageWrapper } from '/@/components/Page';
  // 附件展示组件
  import { Annex } from '/~/components/Annex';
  // ----------------------------- 其他引入 -----------------------------
  import { formSchemas, tableColumns } from './schema.data';
  import OrderApi from '/@/api/work/sale/order';
  //----------------------------- 变量声明区 -----------------------------
  const detailRef = ref<Recordable>({});
  // ----------------------------- hooks使用区 -----------------------------
  const { closeTo, currentRoute } = useAppRouter();
  const { t } = useI18n();
  // modalRegister弹框注册函数 openModal 打开弹框
  const [modalRegister, { openModal }] = useModal();
  // getTax 获取税率, taxChange 税率变更函数（通过传入客户ID进行查询）, taxChangeWarning 税率变更提示
  const { getTax, taxChange, taxChangeWarning } = useTax('customer');
  // register 表单注册函数  validateFields 验证表单, setFieldsValue 设置表单数据, getFieldsValue 获取表单值对象
  const [register, { setFieldsValue, getFieldsValue, validate }] = useAppForm({
    schemas: formSchemas,
  });
  const [
    // 注册函数
    registerTable,
    {
      // 插入数据
      insertTableDataRecord,
      // 设置表格数据
      setTableData,
      // 获取表格数据
      getDataSource,
      // 删除单挑数据
      deleteTableDataRecord,
      // 更新表格列数据
      updateTableColData,
      // 校验表格数据
      validTableData,
      // 校验表格是否为空
      validTableDataIsEmpty,
    },
  ] = useAppEditTable({
    columns: tableColumns,
    dataSource: [],
  });
  // ----------------------------- 钩子函数区 -----------------------------
  onMounted(async () => {
    console.log(unref(currentRoute).query);
    // 获取路由参数
    const { Id, redo } = unref(currentRoute).query;
    if (Id) {
      // 获取单据详情
      let res = await OrderApi.api_get({ BillId: Id });
      // 如果是重做的单据 删除它的BillId
      redo && delete res.BillId;
      await setFieldsValue(res);
      taxChange(res.CustomerId);
      setTableData(res.BillItems);
      detailRef.value = res;
    }
  });
  //  ----------------------------- 自定义方法区 -----------------------------
  // 删除明细项
  function handleDelete(record: Recordable) {
    // 通过绑定的rowKey删除
    deleteTableDataRecord(unref(record).ItemId);
  }
  // 获取选择的物料明细数据
  function getMaterial(selects: Recordable[]) {
    // 插入数据
    insertTableDataRecord(
      selects.map((item) => {
        return {
          ...item,
          // 给每条数据添加税率信息
          Tax: getTax(),
        };
      }),
    );
  }
  // 选择 编辑明细
  async function editDetails() {
    // 先验证表单 才能选择明细
    await validate();
    openModal(true, {
      // 把当前表格的数据传入 防止物料被重复选择
      details: getDataSource(),
    });
  }
  // 提交
  async function submitAll(SaveAndSubmit = false) {
    try {
      // 校验表单
      let formFieldsValue = await validate();

      // 表格空数据校验
      await validTableDataIsEmpty();
      // 组合参数
      let params = {
        // 详情数据
        ...detailRef.value,
        // 保存并提交 或者 保存
        SaveAndSubmit,
        // 明细数据
        BillItems: await validTableData(),
        // 表单信息
        ...formFieldsValue,
      };
      // 接口保存编辑
      // let Id = await OrderApi.api_save(params);
      console.log(params);

      let Id = 'testId';
      // 获取到编辑单据的Id 关闭当前页面 并跳转到这张单据的详情
      Id &&
        closeTo({
          name: 'Sa_Order_Detail',
          query: {
            Id,
          },
        });
    } catch (error) {
      console.log('not passing', error);
    }
  }
  // 监听客户变更 以变更明细的税率
  function fieldChange(key) {
    if (key === 'CustomerName') {
      nextTick(() => {
        taxChangeWarning(getFieldsValue()['CustomerId'], updateTableColData);
      });
    }
  }
</script>
